<!--
 * @Descripttion: 
 * @version: @ 1.0.0
 * @Author: 朱江洲
 * @Date: 2021-12-14 16:24:45
 * @LastEditors: 朱江洲
 * @LastEditTime: 2021-12-15 09:09:31
-->
<template>
  <div>
    <div class="header">
      <div class="bread">
        <div style="margin-left: 10px">
          <span> 同姓州起伏网 </span>
        </div>
        <div class="bread-right">
          <span> 已认证服务号 </span>
        </div>
      </div>
      <div>
        <i
          class="iconfont icon-ico_bb_sx"
          style="font-size: 14px; color: #1267fa"
        ></i>
        <span> 刷新 </span>
      </div>
    </div>
    <div class="content">
      <div class="left">
        <div class="basics" style="margin-left: 10px">基础信息</div>
        <el-form :model="wxForm" class="formWx">
          <el-form-item label="Appid:">
            {{ wxForm.appid }}
            <i class="iconfont icon-fuzhi copyApd" @click="copyAd"></i>
          </el-form-item>
          <el-form-item label="微信号:">
            {{ wxForm.wxAccount || "-" }}
          </el-form-item>
          <el-form-item label="主体名称:">
            {{ wxForm.mainTitle }}
          </el-form-item>
        </el-form>
      </div>
      <div class="right">
        <img src="../../.././../assets/images/kaifa.jpeg" alt="" />
      </div>
    </div>
    <div class="footer">
      <span>解除绑定</span>
      <span>已授权列表</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      wxForm: {
        appid: "wxe1102f16e73e64c5",
        wxAccount: "",
        mainTitle: "安敏库派信息科技有限公司",
      },
    };
  },
  methods: {
    copyAd() {
      var input = document.createElement("input"); // js创建一个input输入框
      input.value = this.wxForm.appid; // 将需要复制的文本赋值到创建的input输入框中
      document.body.appendChild(input); // 将输入框暂时创建到实例里面
      input.select(); // 选中输入框中的内容
      document.execCommand("Copy"); // 执行复制操作
      document.body.removeChild(input); // 最后删除实例中临时创建的input输入框，完成复制操作
      this.$message.success("复制成功");
    },
  },
};
</script>

<style lang="less" scoped>
.header {
  width: 100%;
  height: 74px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ececec;
  .bread {
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #2b2b2b;
    display: flex;
    .bread-right {
      width: 100px;
      height: 16px;
      line-height: 16px;
      text-align: center;
      margin-left: 20px;
      font-size: 12px;
      background-color: #7bd160;
      color: #fff;
    }
  }
}
.content {
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #ececec;

  .left {
    width: 40%;
    .formWx {
      margin-top: 20px;
    }
    .basics {
      position: relative;
      font-size: 16px;
    }
    .basics::before {
      content: "";
      position: absolute;
      left: -6px;
      top: 1px;
      width: 3px;
      height: 16px;
      background: #1267fa;
    }
    .copyApd {
      cursor: pointer;
    }
  }
  .right {
    width: 200px;
    height: 200px;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.footer {
  //   padding: 0 20px;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #ececec;
  //   box-shadow: 0 0 4px rgba(0, 21, 41, 0.08);
  span {
    margin-right: 20px;
  }
}
</style>